<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>0601-JS作业-时钟-螺旋-改</title>
	<style type="text/css">
		html,body {height: 100%;font-family: "Microsoft YaHei";}
		body,ul {margin: 0;}
		ul {padding: 0;list-style: none;}
		i{
			font-style: normal;
			display: block;
		}
		body{
			background: #000 url("images/bgimg.jpg") no-repeat center/cover;
		}
		.wrap1,.clock,.needle,.num{
			width: 500px;
			height: 500px;
		}
		.wrap1{
			position: absolute;
			top: 150px;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
		.clock{
			opacity: .6;
			background: url("images/clock.jpg") no-repeat;
			border-radius: 50%;
			box-shadow: 0 15px 20px rgba(0,0,0,.8);
		}
		.noon{
			position: absolute;
			right: 130px;
			bottom: 130px;
			width: 80px;
			height: 40px;
			background-color: #fff;
			color: #666;
			font-size: 24px;
			font-weight: 700;
			line-height: 40px;
			text-align: center;
			border-radius: 5px;
			box-shadow: 0 3px 8px rgba(0,0,0,.8) inset;
		}
		.num{
			position: absolute;
			left: 225px;
			bottom: 250px;
			width: 50px;
			height: 220px;
		}
		.num li{
			position: absolute;
			bottom: 0;
			width: 50px;
			height: 230px;
			transform-origin: 25px 230px;
		}
		.num li i{
			width: 50px;
			height: 40px;
			font-size: 26px;
			font-weight: 700;
			line-height: 40px;
			color: #fff;
			text-align: center;
			text-shadow: 0 0 6px rgba(0,0,0,.8);
			transform-origin: 25px 20px;
		}
		.item{
			position: absolute;
			left: 248px;
			bottom: 250px;
			width: 10px;
			height: 248px;
		}
		.item li{
			position: absolute;
			width: 4px;
			height: 10px;
			background-color: #fff;
			border-radius: 2px;
			box-shadow: 0 0 6px rgba(0,0,0,.8);
			transform-origin: 2px 248px;
		}
		.needle{
			position: absolute;
			top: 60px;
			left: 240px;
			width: 20px;
			height: 200px;
		}
		.needle li{
			position: absolute;
			bottom: 0;
			width: 20px;
			border-radius: 10px;
		}
		.needle li:nth-child(1){
			z-index: 3;
			height: 130px;
			background-color: rgba(0,190,100,.7);
			transform-origin: 10px 120px;
		}
		.needle li:nth-child(2){
			z-index: 2;
			height: 160px;
			background-color: rgba(0,120,255,.7);
			transform-origin: 10px 150px;
		}
		.needle li:nth-child(3){
			z-index: 1;
			height: 200px;
			background-color: rgba(150,0,255,.7);
			transform-origin: 10px 190px;
		}
	</style>
</head>
<body>
	<section class="wrap1">
		<div class="clock"></div>
		<div class="noon"></div>
		<ul class="num"></ul>
		<ul class="item"></ul>
		<ul class="needle">
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</section>
</body>
<script>
    var oNee = document.getElementsByClassName('needle')[0],
	    oNh = oNee.getElementsByTagName('li')[0],
        oNm = oNee.getElementsByTagName('li')[1],
        oNs = oNee.getElementsByTagName('li')[2],
        oNum = document.getElementsByClassName('num')[0],
        oItem = document.getElementsByClassName('item')[0],
        oNoon = document.getElementsByClassName('noon')[0];

    for(var i=1;i<13;i++){//生成表盘数字
        oNum.innerHTML += `<li><i>${i}</i></li>`;
        oNum.getElementsByTagName('li')[i-1].style.transform = `rotate(${i*30}deg)`;
        oNum.getElementsByTagName('li')[i-1].getElementsByTagName('i')[0].style.transform = `rotate(${i*-30}deg)`;
        if(i % 3 === 0){
            oNum.getElementsByTagName('li')[i-1].getElementsByTagName('i')[0].style.fontSize = '40px';
        }
    }
    for(var i=1;i<61;i++){//生成表盘刻度
        oItem.innerHTML += `<li></li>`;
        oItem.getElementsByTagName('li')[i-1].style.transform = `rotate(${i*6}deg)`;
        if(i % 5 === 0){
            oItem.getElementsByTagName('li')[i-1].style.height = '15px';
        }
    }
    
    fn();//生成默认指针位置
	setInterval(fn,1000);//每1秒执行一次fn
	function fn(){
        var date = new Date(),
            nH = date.getHours(),//获取小时
            nM = date.getMinutes(),//获取分
            nS = date.getSeconds();//获取秒
		if(nH>12){//24小时转12小时
		    nH = nH-12;
            oNoon.innerHTML = '下 午';
		}else{
            oNoon.innerHTML = '上 午';
		}
        oNh.style.transform = `rotate(${(nH + nM/60)*30}deg)`;//时针
        oNm.style.transform = `rotate(${(nM + nS/60)*6}deg)`;//分针
        oNs.style.transform = `rotate(${nS*6}deg)`;//秒针
	}
	
</script>
</html>